<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="75%"
    @close="dialogClose"
    class="dateDialog aMDialog"
  >
    <template slot="title">
      <span class="tit">调仓记录</span>
      <!-- <el-date-picker
        style="width: 200px; margin: 0 12px;"
        size="small"
        :picker-options="pickerMonOptions"
        v-model="monDates"
        placeholder="选择日期"
      ></el-date-picker> -->
      <!-- <el-button type="small" @click="preDay()">
        前一天
      </el-button>
      <el-button type="small" @click="nextDay()" :disabled="nextDisabled">
        后一天
      </el-button> -->
    </template>
    <div class="title"><span></span></div>
    <div v-if="type === 0">
      <el-table
        ref="multipleTable"
        :data="compositionTable"
        stripe
        border
        size="mini"
        :header-cell-style="{
          background: '#F5F7FA',
          color: '#333',
          'font-weight': 'normal',
        }"
        style="width: 100%"
      >
        <el-table-column
          prop="warehouseAdjustmentName"
          label="组合名称"
        ></el-table-column>
        <el-table-column
          prop="warehouseAdjustmentTime"
          label="调仓时间"
          width="100"
        >
          <template slot-scope="{ row }">
            {{ AdjustmentTimeMoment(row.warehouseAdjustmentTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="操作时间"
          width="100"
        ></el-table-column>
        <el-table-column prop="warehouseAdjustmentDirect" label="调仓方向">
          <template slot-scope="{ row }">
            <span v-if="row.warehouseAdjustmentDirect === 0">申购</span>
            <span v-else-if="row.warehouseAdjustmentDirect === 1">赎回</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="warehouseAdjustmentEquity"
          label="金额(元)"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="warehouseAdjustmentNetworth"
          label="买入/卖出 净值"
          width="120"
        ></el-table-column>
        <el-table-column prop="latestNetworth" label="最新单位净值" width="120">
          <template slot-scope="{ row }">
            <span>{{ row.latestNetworth || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="warehouseAdjustmentShare"
          label="份额(份)"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="subscriptionFee"
          label="认/申购费(%)"
          width="130"
        >
          <template slot-scope="{ row }">
            <span>{{ row.subscriptionFee || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="managementFee" label="管理费(%)" width="120">
          <template slot-scope="{ row }">
            <span>{{ row.managementFee || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="performanceFee" label="业绩报酬(%)" width="130">
          <template slot-scope="{ row }">
            <span>{{ row.performanceFee || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="commissionRate" label="佣金比例(%)" width="130">
          <template slot-scope="{ row }">
            <span>{{ row.commissionRate || "-" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="false"
        style="text-algin: left"
        v-show="total > 0"
        :total="total"
        :layout="'total, sizes, prev, pager, next'"
        :page.sync="listQuery.start"
        :limit.sync="listQuery.limit"
        @pagination="queryStockAdjustmentNew"
      />
    </div>
    <div v-if="type === 1 || type === 0">
      <div class="title"><span></span></div>
      <el-table
        ref="multipleTable"
        :data="investTable"
        stripe
        border
        size="mini"
        :header-cell-style="{
          background: '#F5F7FA',
          color: '#333',
          'font-weight': 'normal',
        }"
        style="width: 100%"
      >
        <el-table-column
          prop="warehouseAdjustmentName"
          label="投资名称"
        ></el-table-column>
        <el-table-column
          prop="warehouseAdjustmentTime"
          label="调仓时间"
          min-width="100"
        >
          <template slot-scope="{ row }">
            {{ AdjustmentTimeMoment(row.warehouseAdjustmentTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="操作时间"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="warehouseAdjustmentDirect"
          label="调仓方向"
          min-width="80"
        >
          <template slot-scope="{ row }">
            <span v-if="row.warehouseAdjustmentDirect === 0">申购</span>
            <span v-else-if="row.warehouseAdjustmentDirect === 1">赎回</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="warehouseAdjustmentEquity"
          label="金额(元)"
          min-width="80"
        ></el-table-column>
        <el-table-column
          prop="warehouseAdjustmentNetworth"
          label="买入/卖出 净值"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="latestNetworth"
          label="最新单位净值"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <span>{{ row.latestNetworth || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="warehouseAdjustmentShare"
          label="份额(份)"
          min-width="80"
        ></el-table-column>
        <el-table-column
          prop="subscriptionFee"
          label="认/申购费(%)"
          min-width="110"
        >
          <template slot-scope="{ row }">
            <span>{{ row.subscriptionFee || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="managementFee" label="管理费(%)" min-width="90">
          <template slot-scope="{ row }">
            <span>{{ row.managementFee || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="performanceFee"
          label="业绩报酬(%)"
          min-width="100"
        >
          <template slot-scope="{ row }">
            <span>{{ row.performanceFee || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="commissionRate"
          label="佣金比例(%)"
          min-width="110"
        >
          <template slot-scope="{ row }">
            <span>{{ row.commissionRate || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="commissionRate"
          label="调仓确认"
          min-width="80"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <span v-show="row.confirmFlag === 1">已确认</span>
            <el-button
              v-show="row.confirmFlag === 0"
              type="text"
              @click="confirmHandl(row)"
            >
              确认
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="commissionRate"
          label="操作"
          min-width="80"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-button type="text" @click="deleteHandle(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        style="text-algin: left"
        v-show="total > 0"
        :total="total1"
        :layout="'total, sizes, prev, pager, next'"
        :page.sync="listQuery1.start"
        :limit.sync="listQuery1.limit"
        @pagination="queryStockAdjustmentNew"
      />
    </div>
    <div v-if="type === 2">
      <div class="title"><span></span></div>
      <el-table
        ref="multipleTable"
        :data="subInvestTable"
        stripe
        border
        size="mini"
        :header-cell-style="{
          background: '#F5F7FA',
          color: '#333',
          'font-weight': 'normal',
        }"
        style="width: 100%"
      >
        <el-table-column
          min-width="110"
          prop="warehouseAdjustmentName"
          label="子投资名称"
        ></el-table-column>
        <el-table-column
          prop="warehouseAdjustmentTime"
          label="调仓时间"
          min-width="100"
        >
          <template slot-scope="{ row }">
            {{ AdjustmentTimeMoment(row.warehouseAdjustmentTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="操作时间"
          min-width="100"
        ></el-table-column>
        <el-table-column prop="warehouseAdjustmentDirect" label="调仓方向">
          <template slot-scope="{ row }">
            <span v-if="row.warehouseAdjustmentDirect === 0">申购</span>
            <span v-else-if="row.warehouseAdjustmentDirect === 1">赎回</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="warehouseAdjustmentEquity"
          label="金额(元)"
          min-width="80"
        ></el-table-column>
        <el-table-column
          prop="warehouseAdjustmentNetworth"
          label="买入/卖出 净值"
          min-width="110"
        ></el-table-column>
        <el-table-column
          prop="latestNetworth"
          label="最新单位净值"
          min-width="110"
        >
          <template slot-scope="{ row }">
            <span>{{ row.latestNetworth || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="warehouseAdjustmentShare"
          label="份额(份)"
          min-width="80"
        ></el-table-column>
        <el-table-column
          prop="subscriptionFee"
          label="认/申购费(%)"
          min-width="100"
        >
          <template slot-scope="{ row }">
            <span>{{ row.subscriptionFee || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="managementFee" label="管理费(%)" min-width="100">
          <template slot-scope="{ row }">
            <span>{{ row.managementFee || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="performanceFee"
          label="业绩报酬(%)"
          min-width="110"
        >
          <template slot-scope="{ row }">
            <span>{{ row.performanceFee || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="commissionRate"
          label="佣金比例(%)"
          min-width="110"
        >
          <template slot-scope="{ row }">
            <span>{{ row.commissionRate || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="commissionRate"
          label="调仓确认"
          min-width="80"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <span v-show="row.confirmFlag === 1">已确认</span>
            <el-button
              v-show="row.confirmFlag === 0"
              type="text"
              @click="confirmHandl(row)"
            >
              确认
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="commissionRate"
          label="操作"
          min-width="80"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-button type="text" @click="deleteHandle(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        style="text-algin: left"
        v-show="total > 0"
        :total="total2"
        :layout="'total, sizes, prev, pager, next'"
        :page.sync="listQuery2.start"
        :limit.sync="listQuery2.limit"
        @pagination="queryStockAdjustmentNew"
      />
    </div>
  </el-dialog>
</template>
<script>
import moment from "moment";
import {
  queryStockAdjustmentNew,
  confirmWarehouseAdjustment,
  deleteInvestManageWarehouseAdjustment,
} from "@/api/afterInvest";
import { debounce } from "@/utils/validate";
import Pagination from "@/components/Pagination";
export default {
  components: { Pagination },
  data() {
    return {
      listQuery: {
        start: 1,
        limit: 10,
      },
      listQuery1: {
        start: 1,
        limit: 10,
      },
      listQuery2: {
        start: 1,
        limit: 10,
      },
      total: 100,
      total1: 100,
      total2: 100,
      id: 0,
      // monDates: '',
      investTable: [],
      subInvestTable: [],
      compositionTable: [],
      nextDisabled: false,
      dialogVisible: false,
    };
  },
  computed: {
    AdjustmentTimeMoment: function () {
      return function (date) {
        return moment(date).format("YYYY-MM-DD");
      };
    },
  },
  props: {
    warehouseDialogVisible: {
      type: Boolean,
    },
    type: {
      type: Number | String,
    },
    row: {
      type: Object | Array,
    },
  },
  watch: {
    warehouseDialogVisible: function (newVal, oldVal) {
      if (newVal) {
        this.dialogVisible = newVal;
        this.monDates = "";
        debounce(this.getInfo, 500)();
      }
    },
  },
  methods: {
    getInfo() {
      if (this.type === 0) {
        this.id = this.row.compositionId;
      } else if (this.type === 1) {
        this.id = this.row.investId;
      } else {
        this.id = this.row.investId;
      }
      this.queryStockAdjustmentNew();
    },
    queryStockAdjustmentNew() {
      let limit = 10;
      let start = 1;
      if (this.type === 2) {
        limit = this.listQuery2.limit;
        start = this.listQuery2.start;
      } else {
        limit = this.listQuery1.limit;
        start = this.listQuery1.start;
      }
      queryStockAdjustmentNew({
        id: this.id,
        type: this.type,
        limit,
        start,
      }).then((res) => {
        console.log("调仓记录", res.body);
        this.subInvestTable = [];
        this.investTable = [];
        this.compositionTable = [];
        if (this.type === 2) {
          this.total2 = res.body.total;
          this.subInvestTable = res.body.list;
        } else {
          this.total1 = res.body.total;
          this.investTable = res.body.list;
        }
      });
    },
    confirmHandl(row) {
      confirmWarehouseAdjustment({
        id: row.id,
      }).then((res) => {
        this.$notify({
          message: res.body,
          type: "success",
          duration: 2000,
        });
        this.getInfo();
      });
    },
    deleteHandle(row) {
      this.$confirm(
        `确认删除${row.warehouseAdjustmentName}的
        ${row.warehouseAdjustmentDirect === 0 ? "申购" : "赎回"}
        记录？`,
        "提示",
        {
          type: "warning",
        }
      )
        .then((_) => {
          deleteInvestManageWarehouseAdjustment({
            id: row.id,
          }).then((res) => {
            this.$notify({
              message: res.body,
              type: "success",
              duration: 2000,
            });
            this.getInfo();
          });
        })
        .catch((_) => {});
    },
    dialogClose() {
      this.$emit("update:warehouseDialogVisible", false);
      this.$emit("closeOpen");
    },
  },
};
</script>
<style scoped lang="scss">
.title {
  color: #333;
  font-size: 14px;
  margin: 10px 0;
}
.tit {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
  font-weight: bold;
}
</style>
